<template>
  <div class="info">
    <el-descriptions :column="1" title="基本信息" border>
      <template slot="extra">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="updateHandle(mall_user.id)"
          circle
        ></el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ mall_user.account }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-magic-stick"></i>
          昵称
        </template>
        {{ mall_user.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ mall_user.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          邮箱
        </template>
        {{ mall_user.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-view"></i>
          性别
        </template>
        <span v-if="mall_user.sex === '1'">男</span>
        <span v-else-if="mall_user.sex === '2'">女</span>
        <el-tag v-else="mall_user.sex === '0'">保密</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-umbrella"></i>
          年龄
        </template>
        <el-tag type="success" v-if="mall_user.age === 0">保密</el-tag>
        <span v-else>{{ mall_user.age }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          注册时间
        </template>
        {{ mall_user.created }}
      </el-descriptions-item>
    </el-descriptions>
    <!-- 弹窗, 修改个人信息 -->
    <info-update
      v-if="editVisible"
      ref="infoUpdate"
      @refreshUserInfo="getUserInfo"
    ></info-update>
  </div>
</template>
<script>
import InfoUpdate from './info-update'
export default {
  data() {
    return {
      mall_user: {
        id: '',
        account: '',
        name: '',
        password: '',
        email: '',
        phone: '',
        age: '',
        sex: ''
      },
      editVisible: false
    }
  },
  components: {
    InfoUpdate
  },
  // created只会在首次在首次加载该组件时生效
  // activated是页面激活后的钩子函数
  activated() {
    // 从vuex中获取个人信息!!误删
    this.getMallUserInfo()
    this.getUserInfo()
  },
  methods: {
    // 从vuex中获取个人信息!!误删
    getMallUserInfo() {
      this.mall_user.id = this.$store.getters.getUser.id
    },
    // 获取最新个人信息
    getUserInfo() {
      this.$http({
        url: this.$http.adornUrl(`/member/user/info/${this.mall_user.id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.mall_user = data.user
        } else {
          console.log(123)
        }
      })
    },
    // 控制编辑弹窗，修改个人信息
    updateHandle(id) {
      this.editVisible = true
      // 向子组件传递值
      this.$refs.infoUpdate.init(id)
    }
  }
}
</script>
<style scoped>
.info {
  width: 500px;
  margin: 20px auto;
}
</style>
